<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('tagSetting.标签设置')" />
    <!-- <div class="flex_aic_jcsb">
      <div class="flex_aic gap-4">
        <el-input
          v-model="searchForm.tagName"
          placeholder="请输入标签名称"
          style="width: 250px"
        >
          <template #prefix>
            <span class="color-555555">标签名称</span>
          </template>
        </el-input>
      </div>
      <div class="flex_aic">
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>
    </div> -->

    <div class="mt12 toolbar flex_aic_jcsb" v-my-point="'skuAttribute:add'">
      <div class="addBtn flex_aic_jcc" @click="handleAdd">
        <SvgIcon name="iconxinzeng" class="mr8" />
        <span>{{ $t('tagSetting.新增标签') }}</span>
      </div>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      height="calc(100% - 200px)"
      border
      v-loading="loading"
    >
      <el-table-column :prop="'name' + locale" :label="$t('tagSetting.标签名称')" />
      <el-table-column prop="sort" :label="$t('tagSetting.排序')" />
      <el-table-column :label="$t('tagSetting.操作')" width="200">
        <template #default="scope">
          <div class="flex_aic_jcc">
            <el-button type="text" size="small" @click="handleEdit(scope.row)" v-my-point="'skuAttribute:edit'">
              {{ $t('tagSetting.编辑') }}
            </el-button>
            <el-popconfirm
              :title="$t('tagSetting.确定删除该标签吗')"
              @confirm="handleDelete(scope.row)"
              width="260px"
            >
              <template #reference>
                <el-button type="text" size="small" v-my-point="'skuAttribute:del'">{{ $t('tagSetting.删除') }}</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <editDia
      ref="editDiaRef"
      v-model="showEditDia"
      @success="handleSuccess"
      :data="editData"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import editDia from "./editDia.vue";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";

const { locale, t } = useI18n();

const searchForm = ref({
  tagName: "",
});

const editDiaRef = ref(null);
const showEditDia = ref(false);
const editData = ref({});

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const loading = ref(false);
const tableData = ref([]);

const resetSearch = () => {
  searchForm.value = {
    tagName: "",
  };
};

const handleSearch = () => {
  currentPage.value = 1;
  // 实际开发中这里会调用API获取数据
  console.log("搜索标签:", searchForm.value);
};

const handleAdd = () => {
  editData.value = {};
  showEditDia.value = true;
};

const handleEdit = (row) => {
  editData.value = { ...row };
  showEditDia.value = true;
};

const handleDelete = (row) => {
  Api.skuAttribute_delete([row.id]).then((res) => {
    if (res.status == 200) {
      ElMessage.success(t('tagSetting.操作成功'));
      currentPage.value = 1;
      getDataList();
    }
  });
};

const handleSuccess = (data) => {
  // 更新列表数据
  currentPage.value = 1;
  getDataList();
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
  getDataList();
};

const handleCurrentChange = (page) => {
  currentPage.value = page;
  getDataList();
};

const getDataList = async () => {
  loading.value = true;
  const res = await Api.skuAttribute_list({
    page: currentPage.value - 1,
    pageSize: pageSize.value,
  });
  tableData.value = res.data?.content || [];
  total.value = Number(res.data?.totalElements || 0);
  loading.value = false;
};

onMounted(() => {
  getDataList();
});
</script>

<style lang="scss" scoped>
.toolbar {
  width: 100%;
  height: 42px;
  margin-bottom: 5px;
  background: rgba(255, 126, 40, 0.1);
}
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.cover-table {
  margin-top: 20px;
}
</style>
